CSS字体、文本属性以及盒模型

今天学习第二模块啦，今天的任务和内容比较多的啊，主要包括css的常用样式和盒模型。接下来见证我的学习过程吧！

作用：设置文字是否加粗 属性名：font-weight，属于font属性的一个单一属性 属性值：单词类型，数字类型。 （1）单词类型： normal，默认值定义标准的字体 bold，定义粗体字符（b，strong是粗体显示） bolder，定义更粗的字体 lighter，定义更细的字体 代码如下（示例）：

（2）数字类型： 100~900间的整百数字，数字越大文字越粗。400=normal 700=bold。 代码如下（示例）：

作用：是否斜体或者倾斜显示 属性名：font-style，属于font的单一属性。 属性值：normal，正规字体 italic，设置斜体，主要针对英文（手写字体设置） oblique，设置倾斜的文字，将文字倾斜显示，与字体无关。

代码如下（示例）：

作用：设置一行文字实际占有的高度。在行高中是垂直居中显示的。 属性值：px像素值，设置行高具体像素 百分比数值，设置本身字号像素的百分比。 例：自身像素14px；则100%=14 200%=28 代码如下（示例）：

实际应用：行高的数值是通过设计图获取，量取数值时需要使用一些辅助工具软件。这里使用（FW，firework） 量取行高的步骤： 1.确定文字字号和字体。使用文字工具，书写两个与内容相同的文字，调整字号和字体，直到两个文字都完全重合，就是我们需要的字号和字体。制作时，设置一个与内容文字颜色差异较大的字体颜色。 2.根据已知的字号和字体，再书写上下对齐的两行文字，调整属性面板的行高值单位为像素，更改数值大小，直到两行文字都对齐，得到的就是我们需要的行高值。

字体、字号、行高、加粗、斜体都是font综合属性的单一属性。 font属性五个属性可以进行和写，属性值可以有2到多个，值之间用空格进行分隔。 写法1： font进行综合书写时，必须有字号和字体参与，并且必须字号在前，字体在后，不能颠倒顺序。 写法2： 按字号、行高、字体顺序书写，字号和行高之间必须用/尽心分隔。 写法3： 加粗和斜体只能写在最前面，两个值之间可以互相换位置。后面的字号、行高、字体不能更改位置。 代码如下（示例）：

作用：设置文本水平方向的对齐。 在盒子中不论是单行还是多行，都会对应方向对齐。 属性值：三个方向的单词 left，居左对齐；center，居中对齐；right，居右对齐 代码如下（示例）：

作用：设置文本整体是否有线条的修饰效果。 属性值：none，没有修饰，默认值 overline，上划线 line-through，中划线，删除线，del标签的默认值 underline，下划线，a标签的默认值 代码如下（示例）：

显示效果：

作用：设置段落首行是否进行缩进。 属性值：px单位，数值是多少表示向右缩进多少像素。 em单位，参考一个文字的宽度，首行缩进几个中文字符的位置。 百分比，表示所缩进文字所在的标签的父级标签的width属性的百分比。 代码如下（示例）：

实际工作中使用em更加多。属性值区分正负数的，正数表示向右缩进，负数表示向左方向。

盒模型又叫做框模型，包含了五个用来描述盒子位置、尺寸属行，分别是width、height、padding、border、margin。 常见盒模型的区域： 书写元素内容区：width height 盒子实体化区域：width height padding border 盒子实际占位置：width height padding border margin

作用：设置添加元素内容区域的宽度 属性值：auto，默认值，浏览器可自动计算出实际宽度 px，像素值定义宽度 百分比，参考父元素宽度的百分比宽度。 代码如下（示例）：

特殊应用： 1.如果一个元素不添加width属性，默认就会为auto，不同的浏览器会根据其特点自动计算出实际宽度，例div元素独占一行，其width属性的值会自动撑满父元素的width区域，如果是span元素等不需要独占一行，其width会按内部内容的尺寸而撑开的。 2.body元素不需要设置width，宽度会自适应浏览器窗口的宽度。

作用：添加元素内容的区域的高度。 属性值：auto，默认值，浏览器可自动计算出实际宽度 px，像素值定义宽度 百分比，参考父元素宽度的百分比宽度。 代码如下（示例）：

特殊应用： 如果一个元素不添加width属性，默认就会为auto，不同的浏览器会根据其特点自动计算出实际高度，元素的高度自适应内部内容的高度。

作用：设置的是元素边框内部到宽高之间的距离。 特点：可以去加载背景，不能书写前套内容。 属性值：常用px为单位 padding是一个复合属性，可根据内边距的方向不同划分4个不同方向的单一属性。 padding-top padding-right padding-bottom padding-left 写法1（示例）：

写法2（示例）：

四值法：padding: 40px 20px 30px 40px;上 右 下 左 三值法：padding: 40px 20px 30px;上 左右 下 二值法：padding: 40px 20px；上下 左右 单值法：padding: 40px；上下左右都分配40像素。

作用：内边距外面的边界区域，作为盒子实体化的最外层。 属性值：三个值组成，线宽度、形状、颜色。 是一个复合属性，有多种单一属性的写法。 代码如下（示例）：

（1）border-width 设置边框线的宽度，四个值 （2）border-style 设置线形状，属性值如下。 代码如下（示例）：

（3）border-color 作用：设置边框颜色 属性值：颜色名或颜色值。整体类似padding 代码如下（示例）：

每个单一属性都与复合属性一致，三个属性值。 代码如下（示例）：

单一属性的再次划分，border-方向-类型 代码如下（示例）：

作用：设置盒子和盒子之间的距离。 特点：不能渲染背景。常用px作为单位，设置方式与padding是一模一样的。 代码如下（示例）：

代码如下（示例）：

根据不同的需求，高度属性可以设置，也可以不设置。 （1）必须设计高度：设计图中高度占位是固定的，后面同级元素在高度下面加载。 自身盒子内部内容过多会溢出盒子区域。 overflow属性，如果溢出，可以对溢出的部分进行显示效果。 overflow属性值，visible，可见可视的，默认值。 hidden，将超出边框范围的进行隐藏。 scroll，溢出的部分出现滚动条。 auto，没有溢出就显示正常，一旦有溢出会在溢出的方向出现滚动条。 代码如下（示例）：

必须不设置高度： 要求盒子高度自适应内容高度，或者height的属性值是自动的。 代码如下（示例）：

（1）文本的水平居中：text-align （2）文本的垂直居中： 单行文本垂直居中：让文字行高line-height等于盒子高度height。 多行文本的垂直居中：让元素高度自适应，设置上下padding。 （2）元素垂直居中：让元素高度自适应，子元素撑开父级元素高度，给父元素设置padding。 （3）元素水平居中：上下随意，左右auto，margin： 0 auto； 代码如下（示例）：

一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够(不考虑溢出情况)，需要遵循一个设置尺寸的规律:所有子元素的宽度加在一起不能大于父元素的宽度width. 代码如下（示例）：

（1）同级元素:如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。 （2）父子元素:让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开;更加常用的方法，父子盒模型之间的距离就不要用儿子的margin分隔开;更加常用的方法，父子盒模型之间的距离就不要用儿子的margin而是父级的padding 挤出来。 代码如下（示例）：

今天内容太多了，学到了好晚啊，近两天觉得学习好吃力啊，但也要坚持的啊，相信学有所成。